<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.bubble-box {
	position: relative;
	border-radius: 5px;
	width: 200px;
	height: 50px;
	background-color: #f90;
	line-height: 50px;
	text-align: center;
	font-size: 20px;
	color: #fff;
}

.bubble-box::after {
	position: absolute;
	left: 100%;
	top: 50%;
	margin-top: -5px;
	border: 5px solid transparent;
	border-left-color: #f90;
	content: "";
}


.bubble-empty-box {
	position: relative;
	border: 2px solid #f90;
	border-radius: 5px;
	width: 200px;
	height: 50px;
	line-height: 46px;
	text-align: center;
	font-size: 20px;
	color: #f90;
}
.bubble-empty-box::before {
	position: absolute;
	left: 100%;
	top: 50%;
	margin: -5px 0 0 2px;
	border: 5px solid transparent;
	border-left-color: #f90;
	content: "";
}
.bubble-empty-box::after {
	position: absolute;
	left: 100%;
	top: 50%;
	margin-top: -4px;
	border: 4px solid transparent;
	border-left-color: #fff;
	content: "";
}



.heart-shape {
	position: relative;
	width: 200px;
	height: 200px;
	background-color: #f66;
	transform: rotate(45deg);
}
.heart-shape::before,
.heart-shape::after {
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 100%;
	width: 100%;
	height: 100%;
	background-color: #f66;
	content: "";
}
.heart-shape::before {
	transform: translateX(-50%);
}
.heart-shape::after {
	transform: translateY(-50%);
}


.gradient-heart-shape {
	position: relative;
	width: 200px;
	height: 200px;
	background-image: linear-gradient(to bottom, #09f, #f66);
	box-shadow: 0 0 20px rgba(#000, .8);
	transform: rotate(45deg);
}
.gradient-heart-shape::before,
.gradient-heart-shape::after {
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 100%;
	width: 100%;
	height: 100%;
	content: "";
}
.gradient-heart-shape::before {
	background-image: linear-gradient(to bottom, #09f, #f66);
	transform: translateX(-50%);
}
.gradient-heart-shape::after {
	background-image: linear-gradient(to bottom, #3c9, #09f 50%, transparent 50%, transparent);
	transform: translateY(-50%);
}

</style>
</head>
<body>
	<div class="bubble-box">iCSS</div>
	
	<div class="bubble-empty-box">iCSS</div>
	
	<div class="heart-shape"></div>
	
	<div class="gradient-heart-shape"></div>
</body>
</html>
